<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/jsphead.jsp" %>
<!doctype html>
<html>
<head>
	<title>${appTitle}  - 总目</title>
	<link rel="stylesheet" type="text/css" href="css/default.css"/>
	<link rel="stylesheet" type="text/css" href="jslib/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<style type="text/css">
		body,div{font-size:14px;}
		#container{width:715px;margin-left:auto;margin-right:auto;}
		#header{font-size:32px;font-weight:bold;border-bottom:2px solid #999;text-align:center;margin-bottom:15px;padding-bottom:10px;}
		
		#bookTypes{
			float:left;width:210px;
			border: 1px solid #aaa; border-bottom:none;
			text-align:left;margin-right:10px;
		}
		.bookType{
			background-color:#e4d7ca;
			padding:8px;cursor:pointer;
			border-bottom: 1px solid #aaa;
		}
		.bookType-active{background-color:#cbb198;cursor:default;color:#000;}
		#books{float:left; width:490px;}
		
		.book-item{height:15px;border-bottom:1px solid #ccc;margin:10px 0px; color:#000;cursor:pointer;padding-bottom:1px;}
		.book-item:hover {border-bottom:1px solid #222;}
		.book-item-hover {border-bottom:1px solid #222;}
		.title{float:left;}
		.author{float:right;}
	</style>
	<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jslib/fancybox/jquery.fancybox-1.3.4.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".book").fancybox({
				'width'				: '100%',
				'height'			: '100%',
				'padding'			: 8,
				'margin'			: 20,
				'enableEscapeButton': true,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});
			
			if (isIE6()){
				$(".book-item").hover(function(){
					$(this).addClass("book-item-hover");
				},function(){
					$(this).removeClass("book-item-hover");
				});
			}
		});
		
		function isIE6(){
			return $.browser.msie && ($.browser.version == "6.0") && !$.support.style;
		}
	</script>
</head>
<body>
	<div id="container">
		<div style="text-align:left;margin-bottom:10px;font-size:12px;">
			<div style="float:left;">
				<a class="a1" href="${baseHref}"><img src="image/ln_title.gif" style="width:200px;border:none;"/></a>
			</div>
			<div style="float:left;padding:7px 0 0 7px;font-size:12px;">
				<a class="a1" href="${baseHref}">首页</a> > 总目
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="header">总&nbsp;&nbsp;目</div>
		<div>
			<div id="bookTypes">
				<s:iterator value="bookTypes">
				<s:if test="id==bookTypeId">
				<div class="bookType bookType-active">
					<s:property value="name"/>
				</div>
				</s:if><s:else>
				<a class="a1" href="view!showCatalogue.action?bookTypeId=<s:property value="id"/>">
					<div class="bookType">
						<s:property value="name"/>
					</div>
				</a>
				</s:else>
				</s:iterator>
			</div>
			<div id="books">
				<s:iterator value="books">
					<a class="a1 book" href="view!bookDetail.action?bookId=<s:property value="id"/>">
					<div class="book-item">
						<div class="title"><s:property value="name"/></div>
						<div class="author"><s:property value="author"/></div>
						<div style="clear:both;"></div>
					</div>
					</a>
				</s:iterator>
			</div>
			<div style="clear:both;"></div>
		</div>
	 </div>
</body>
</html>